"use client"

import { useState } from "react";
import { ActiveTool, Editor } from "../types"
import { Hint } from "@/components/hint";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface ToolbarProps {
  editor: Editor | undefined;
  activeTool: ActiveTool;
  onChangeActiveTool: (tool: ActiveTool) => void;
  key: string;
}

export const Toolbar = ({
  editor,
  activeTool,
  onChangeActiveTool,
}: ToolbarProps) => {
  if (editor?.selectedObjects.length === 0) {
    return (
      <div className="shrink-0 h-[56px] border-b bg-white w-full flex
      items-center overflow-x-auto z-[49px] p-2 gap-x-2"/>
    )
  }

  const selectedObject = editor?.canvas.getActiveObject()

  const getProperty = (property: any) => {
    if (!selectedObject) return null;

    return selectedObject.get(property)
  }

  const fillColor = editor?.selectedObjects[0]?.fill

  const [properties, setProperties] = useState({
    fillColor
  })

  return (
    <div className="shrink-0 h-[56px] border-b bg-white w-full flex
    items-center overflow-x-auto z-[49px] p-2 gap-x-2">
      <div className="flex items-center h-full justify-center">
        <Hint label="Color" side="bottom" sideOffset={5}>
          <Button
            onClick={() => { onChangeActiveTool("fill") }}
            size="icon"
            variant="ghost"
            className={cn(
              activeTool === "fill" && "bg-gray-100"
            )}
          >
            <div
              className="rounded-sm size-4 border"
              style={{
                backgroundColor:
                  typeof fillColor === "string" ? fillColor : "black"
              }}
            />

          </Button>
        </Hint>
      </div>
    </div >
  )
}